<template>
	<view class="feedback">
		<!-- <view class="top_nav_wrap"> -->
			<view class="tabbarBox">
				<u-tabs :list="tabbarList" :is-scroll="false" :current="current" @change="changeNav" active-color="#FFAC3F"></u-tabs>
			</view>
			<!-- <view class="menuList">
				<view class="menuItem" v-for="(item,index) in 8">服务贴心</view>
			</view> -->
		<!-- </view> -->
		<view class="feedbackBox">
			<view class="feedbackList">
				<view class="feedbackItem" v-for="(item,index) in evaList" :key="index" :data-id="item.id" @click="toContent">
					<view class="feedbackItem_top">
						<view class="feedbackImage" :style="{'background-image':'url('+getImage(item.user.image_url)+')'}" :data-id="item.user.id" @click="toMine">
							<!-- <image :src="getImage(item.user.image_url)" mode="" :data-id="item.user.id" @click="toMine"></image> -->
						</view>
						<view class="feedback_R">
							<view class="feedbackNameBox">
								<view class="feedbackName">{{item.user.username}}</view>
								<!-- <view class="memberNum">lv6</view> -->
							</view>
							<view class="feedbacktitmeBox">
								<view class="feedbacktitme">{{item.create_time}}</view>
								<!-- <view class="price">￥65/人</view> -->
							</view>
							<view class="feedbackCont">
								<view class="feedbacktext">{{item.content}}</view>
							</view>
							<view class="feedbackImageList">
								<view class="ImageItem" v-for="(pitem,pindex) in item.ShareImage" :key="pindex" :style="{'background-image':'url('+pitem.titleImage+')'}">
									<!-- <image :src="pitem.titleImage" mode=""></image> -->
								</view>
							</view>
							<!-- <view class="giveBox_B">
								<view></view>
								<view class="give_R">
									<view class="commentBox">
										<view class="commentIcon">
											<image src="/static/mine/comment.png" mode=""></image>
										</view>
										<view class="commentNum">111</view>
									</view>
									<view class="giveBox">
										<u-icon name="thumb-up" color="#707070" size="30"></u-icon>
										<view class="giveNum">123</view>
									</view>
								</view>
							</view> -->
						</view>
					</view>
					<!-- <view class="replyBox">
						<view class="replycont">商家回应：感谢您在百忙之中抽出时间给我们进行评价感谢您在百忙之中抽出时间给我们进行评价</view>
						<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
					</view>
					<view class="selectedImage" v-if="index==0">
						<image src="/static/mine/selected.png" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tabbarList: [{name: '全部'}, {name: '带图/视频'}, {name: '最新',}],
				current: 0,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "10rpx",
					statusHeight:0
				},
				page:1,
				evaList:[],
				evaTotal:0,
				moreFlag:false,
				type:"",
				id:""
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getShareList();
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					if(e.platform == 'ios' || e.platform == 'devtools'){
						_that.statusHeight = e.statusBarHeight + 45;
					}else{
						_that.statusHeight = e.statusBarHeight + 50;
					}
				}
			})
			// #endif
			this.id = options.id;
			this.type = options.type;
			this.getShareList();
		},
		methods: {
			toMine(e){
				console.log(e)
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pageone/pages/Business-card/Business-card?id="+id
				})
			},
			toContent(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagetwo/pages/FindDetail/FindDetail?id="+id
				})
			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getShareList(){
				let obj = {};
				if(this.type=='shop'){
					obj.shop_id = this.id;
				}else if(this.type=='good'){
					obj.shop_package_id = this.id;
				}
				if(this.current==1){
					obj.is_image = 1;
				}
				obj.page = this.page;
				obj.lng = uni.getStorageSync("longitude"); //117.082094;
				obj.lat = uni.getStorageSync("latitude"); //39.987725;
				if(uni.getStorageSync("rmToken")){
					this.$u.api.shareList(obj).then(res=>{
						//console.log(res)
						this.evaTotal = res.data.list.total;
						if(this.page == 1){
							this.evaList = res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							});
						}else{
							this.evaList = this.evaList.concat(res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}else{
					this.$u.api.indexShareList(newObj).then(res=>{
						this.evaTotal = res.data.list.total;
						if(this.page == 1){
							this.evaList = res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							});
						}else{
							this.evaList = this.evaList.concat(res.data.list.data.map(cur=>{
								if(cur.ShareImage.length>0){
									cur.ShareImage = cur.ShareImage.map(pcur=>{
										if (app.$vm.isImage(pcur.image_url)) {
											pcur.titleImage = this.getImage(pcur.image_url);
											pcur.imgType = true;
										} else {
											pcur.titleImage = this.getVideoUrl(pcur.image_url);
											pcur.imgType = false;
										}
										return pcur;
									})
								}else{
									cur.imgType = true;
								}
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			toCommentDetails(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/CommentDetails/CommentDetails"
				})
			},
			changeNav(index) {
				console.log(index)
				this.current = index;
				this.page = 1;
				this.getShareList();
			}
		}
	}
</script>

<style scoped lang="less">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.feedback{
	background-color: #F3F3F3;
	height: 100vh;
	overflow: auto;
	padding-top: 80upx;
		.tabbarBox{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			height: 80upx;
		}
		.menuList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 750upx;
			padding: 24upx 51upx;
			background-color: #fff;
			.menuItem{
				width: 144upx;
				height: 44upx;
				background: #FFF5EA;
				opacity: 1;
				border-radius: 22upx;
				text-align: center;
				line-height: 44upx;
				font-size: 20upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFAC3F;
				// margin-right: 16upx;
				margin-bottom: 16upx;
			}
		}
	.feedbackBox{
		padding: 24upx;
		.feedbackList{
			.feedbackItem{
				position: relative;
				// display: flex;
				padding: 24upx;
				background-color: #fff;
				border-radius: 8upx;
				width: 702upx;
				margin-bottom: 16upx;
				.feedbackItem_top{
					display: flex;
					border-bottom: 2upx solid #F5F5F5;
					.feedbackImage{
						width: 72upx;
						height: 72upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 16upx;
						// background-color: #F0AD4E;
						background-size: cover;
						background-position: center;
						// image{
						// 	width: 100%;
						// 	height: 100%;
						// }
					}
					.feedback_R{
						width: calc(100% - 88upx);
						.feedbackNameBox{
							display: flex;
							align-items: center;
							.feedbackName{
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								margin-right: 8upx;
							}
							.memberNum{
								width: 44upx;
								height: 24upx;
								background: #FF5555;
								opacity: 1;
								border-radius: 12upx;
								text-align: center;
								color: #FFFFFF;
								font-size: 16upx;
								line-height: 24upx;
							}
						}
						.feedbacktitmeBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.feedbacktitme{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #D0D0D0;
								margin-top: 12upx;
							}
							.price{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
						}
						.feedbackCont{
							padding: 24upx 0;
							.feedbacktext{
								font-size: 20upx;
								color: #333333;
								line-height: 34upx;
							}
						}
						.feedbackImageList{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.ImageItem{
								width: 176upx;
								height: 176upx;
								border-radius: 8upx;
								margin-right: 16upx;
								margin-bottom: 16upx;
								// background-color: #F0AD4E;
								background-size: cover;
								background-position: center;
								// image{
								// 	width: 100%;
								// 	height: 100%;
								// 	border-radius: 8upx;
								// }
							}
							.ImageItem:nth-child(3n+3){
								margin-right: 0;
							}
						}
						.giveBox_B{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 32upx 0 24upx 0;
							.give_R{
								display: flex;
								align-items: center;
								.commentBox{
									display: flex;
									align-items: center;
									margin-right: 48upx;
									.commentIcon{
										width: 32upx;
										height: 32upx;
										image{
											width: 100%;
											height: 100%;
										}
									}
									.commentNum{
										font-size: 20upx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #666666;
										margin-left: 10upx;
									}
								}
								.giveBox{
									display: flex;
									align-items: center;
									.giveNum{
										font-size: 20upx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #666666;
										margin-left: 10upx;
									}
								}
							}
						}
						.line{
							width: 100%;
							height: 2upx;
							background: #F5F5F5;
						}
					}
				}
				.replyBox{
					display: flex;
					align-items: center;
					padding-top: 24upx;
					.replycont{
						width: 100%;
						font-size: 20upx;
						color: #333333;
						margin-right: 24upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding-left: 92upx;
					}
				}
				.selectedImage{
					position: absolute;
					top: 100upx;
					right: 24upx;
					width: 64upx;
					height: 64upx;
					// border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
